<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- Mobile Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
    <title>梯度智慧安防</title>

    <script src="js/jquery.min.js"></script>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bigScreen/newscreen.css" rel="stylesheet">

    <link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="css/animations.css" rel="stylesheet">
    <link href="css/content1.0.css" rel="stylesheet">
    <link href="css/widgets.css" rel="stylesheet">
    <script src="js/rem.js"></script>
    <script src="js/globalvarible.js"></script>
    <script>
        function getparam() {


            if (sessionStorage.getItem('jyj') != null) {
                document.getElementById("BackPage").style.display = "inline-block";


            }
            else if (sessionStorage.getItem('username') != null) {


                sessionStorage.removeItem('departmentName');

                sessionStorage.removeItem('identityId');
                sessionStorage.removeItem('route');
                sessionStorage.removeItem('userId');



            }
            else {
                location.href = './nouser.html'

            }
        }





    </script>
    <style type="text/css" rel="stylesheet">
        .cesium-viewer-bottom {
            display: none;
        }
    </style>
</head>

<body id="wrapper" style="height: 100vh;opacity:0">
    <!--背景适配-->
    <div class="bg">
        <div class="bg1">
            <img src="img/bg1.jpg" />
        </div>
        <div class="bg2">
            <img src="img/bg2.jpg" />
        </div>
        <div class="bg3">
            <img src="img/bg3.jpg" />
        </div>
    </div>

    <div class="container-fluid contain-flex">
        <!--标题栏         //无跳转-->
        <!-- 本地测试弹窗 -->
        <!-- <button onClick="onmessage()">dc</button> -->


        <audio id="audio" controls="controls" hidden="true" loop="true">
            <source src="./data/WARNING.mp3" type="audio/mpeg" />
        </audio>
        <div id="tankuang"></div>

        <div class="row">
            <div class="col-lg-12" tyle="height: 8vh">
                <div class="bnt">
                    <div class="topbnt_left fl fontSize_content">
                        <ul>
                            <li><a href="bigScreen.html">总览</a></li>
                            <li><a href="page_Patrol.html">巡更</a></li>
                            <li><a href="page_Polling.html">巡检</a></li>

                            <!--<li><a href="page_Patrol.html">巡更</a></li>-->
                            <!--<li><a href="page_Polling.html">巡检</a></li>-->
                        </ul>
                    </div>

                    <div class="title ">绍兴中专智慧安防</div>

                    <div class=" fr topbnt_right fontSize_content">
                        <ul>

                            <!--<li><a href="page_Safesetup.html">考勤</a></li>-->
                            <li id="BackPage" onclick="backPage()" style="display: none;"><a href="#">区级大屏</a></li>
                            <li><a href="page_Electricity.html">用电</a></li>
                            <li><a href="page_Smoke.html">烟感</a></li>
                        </ul>
                        <!--</ul>-->
                    </div>
                </div>
            </div>
        </div>

        <!-- 首页页面，-->
        <div class="row">
            <div class="col-md-3">
                <div style="height: 10vh;position:relative;background: rgba(58, 70, 181, 0.1);border-radius: 5px"
                    class="t_top_box ">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <img class="t_r_line" src="img/right_line.png" alt="">
                    <ul class="t_nav fontSize_content">
                        <li>
                            <span id="date">2018年11月30日</span>

                        </li>

                        <li>
                            <span id="week">星期五</span>

                        </li>
                        <li>
                            <span id="time">11:34</span>

                        </li>
                    </ul>

                </div>
            </div>
            <div class="col-md-6 ">
                <div style="height: 10vh;position:relative;background: rgba(58, 70, 181, 0.1);border-radius: 5px"
                    class="t_top_box ">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <img class="t_r_line" src="img/right_line.png" alt="">
                    <ul class="t_nav fontSize_content">
                        <li>
                            <span>累计已巡检数</span>
                            <h3 class="sum">12551</h3>
                            <i></i>
                        </li>
                        <li>
                            <span>累计已巡更数</span>
                            <h3 class="sum">130</h3>
                            <i></i>
                        </li>
                        <li>
                            <span>累计隐患处理数</span>
                            <h3 class="sum">123</h3>
                        </li>
                    </ul>

                </div>
            </div>
            <!--外围布局高度已定好 更改请注意-->
            <div class="col-md-3">
                <div style="height: 10vh;position:relative;background: rgba(58, 70, 181, 0.1);border-radius: 5px"
                    class="t_top_box ">
                    <img class="t_l_line" src="img/left_line.png" alt="">
                    <img class="t_r_line" src="img/right_line.png" alt="">
                    <ul id='siz_level' class="t_nav fontSize_content">
                        <li>
                            <span>汽车通道升降柱</span>
                        </li>
                        <li>
                        </li>
                        <li></li>
                        <li>
                            <span>行人通道升降柱</span>
                        </li>
                    </ul>

                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-md-3" style="height:23vh;">


                <div class="templeate_title">
                    <div>今日巡更</div>
                    <div class="templeate_subitle">
                        <span>完成率</span>
                        <span class="day_number">NaN%</span>
                    </div>
                </div>
                <div class="message_scroll_box patro_message_scroll_box  templeate_bgc" style="height: 10vh">

                </div>
                <p class="templeate_title ">昨日巡更/上周巡检完成情况</p>
                <div class="templeate_bgc" style="height: 23vh;">

                    <div id="people_day1" class="kaoqin-content " style="height: 23vh;width: 100%">
                    </div>
                </div>


            </div>


            <div class="col-md-6 ">

                <p class="templeate_title">全景地图</p>
                <div class="templeate_bgc" style="height:39vh;">
                    <div id="cesiumContainer" style=" width: 100%;height: 38vh; padding: 2px; overflow: hidden;"></div>
                </div>
            </div>
            <!--外围布局高度已定好 更改请注意-->
            <div class="col-md-3">
                <div class="templeate_title">
                    <div>待处理隐患事件</div>
                    <div class="templeate_subitle">
                        <span>处理率</span>
                        <span class="day_number">NaN%</span>
                    </div>
                </div>
                <div id="lb" class="templeate_bgc fontSize_content " style="height: 10vh">
                </div>
                <div class="templeate_title">
                    <div>今日设备统计</div>
                    <div class="templeate_subitle">
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class=" templeate_bgc " style="height: 23vh;">
                    <div id="setup" style="height:23vh;">
                    </div>
                    <!--<div id="setup_1" style="height: 5.5vh;margin-left: 15px;"></div>-->
                    <!--<div id="setup_2" style="height: 5.5vh;margin-left: 15px;">-->
                    <!--</div>-->


                </div>
                <!--<p class="templeate_title">烟感设备</p>-->
                <!--<div class="templeate_bgc" style="margin-top: 10px;height: 11vh;width: 100%">-->


                <!--<div id="issb" style="height:100%; "></div>-->
                <!--</div>-->
                <!--<p class="templeate_title">升降柱</p>-->
                <!--<div class=" templeate_bgc"-->
                <!--style="width:100% ;height: 4vh;line-height:4vh;font-weight:bold;text-align: center;font-size: 1.8rem;color: #00ccbc;letter-spacing: 5px">-->
                <!--正门升降柱-升起<img src="img/iconup.png" style="display: inline-block;margin-left: 30px"></div>-->


                <!--witdh  98%因为尺寸是照全屏来的，所以窗口时可能放不下，考虑到窗口 内容不占全屏-->
            </div>
        </div>
        <div class="row">

            <div class="col-md-3 ">
                <div class="templeate_title">
                    <div>本周巡检排班</div>
                    <div class="templeate_subitle">
                        <span>完成率</span>
                        <span class="day_number">NaN%</span>
                    </div>
                </div>
                <div class=" templeate_bgc " id="content_b1" style=" height:25vh;width: 100%;overflow: hidden ">
                    <!--<div class="temper_title" style="    ">-->
                    <!--<div class="thead1">巡检班组</div>-->
                    <!--<div class="thead1">巡检类别</div>-->
                    <!--<div class="thead1">巡检负责人</div>-->
                    <!--</div>-->

                    <div class="dataAllBorder02" style="padding: 1.2%; overflow: hidden">

                        <table class="message_scroll_box  x_scroll_box">
                            <tr class="message_scroll x_scroll_message_scroll">
                                <td class="scroll_top">
                                    <span class="scroll_title">数据流量警示</span>
                                    <span class="scroll_level scroll_level01">一级</span>
                                    <a class="localize"></a>
                                    <span class="scroll_timer">17-09-13/9:52</span>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_title">下载大量视频</a>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_msg">xxx视频网站</a>
                                </td>
                            </tr>
                            <tr class="message_scroll x_scroll_message_scroll">
                                <td class="scroll_top">
                                    <span class="scroll_title">数据流量警示</span>
                                    <span class="scroll_level scroll_level01">一级</span>
                                    <a class="localize"></a>
                                    <span class="scroll_timer">17-09-13/9:52</span>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_title">下载大量视频</a>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_msg">xxx视频网站</a>
                                </td>
                            </tr>
                            <tr class="message_scroll x_scroll_message_scroll">
                                <td class="scroll_top">
                                    <span class="scroll_title">数据流量警示</span>
                                    <span class="scroll_level scroll_level01">一级</span>
                                    <a class="localize"></a>
                                    <span class="scroll_timer">17-09-13/9:52</span>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_title">下载大量视频</a>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_msg">xxx视频网站</a>
                                </td>
                            </tr>
                            <tr class="message_scroll x_scroll_message_scroll">
                                <td class="scroll_top">
                                    <span class="scroll_title">数据流量警示</span>
                                    <span class="scroll_level scroll_level01">一级</span>
                                    <a class="localize"></a>
                                    <span class="scroll_timer">17-09-13/9:52</span>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_title">下载大量视频</a>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_msg">xxx视频网站</a>
                                </td>
                            </tr>
                            <tr class="message_scroll x_scroll_message_scroll">
                                <td class="scroll_top">
                                    <span class="scroll_title">数据流量警示</span>
                                    <span class="scroll_level scroll_level01">一级</span>
                                    <a class="localize"></a>
                                    <span class="scroll_timer ">17-09-13/9:52</span>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_title">下载大量视频</a>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_msg">xxx视频网站</a>
                                </td>
                            </tr>
                            <tr class="message_scroll x_scroll_message_scroll">
                                <td class="scroll_top">
                                    <span class="scroll_title">数据流量警示</span>
                                    <span class="scroll_level scroll_level01">一级</span>
                                    <a class="localize"></a>
                                    <span class="scroll_timer">17-09-13/9:52</span>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_title">下载大量视频</a>
                                </td>
                                <td class="msg_cage">
                                    <a class="localize_msg">xxx视频网站</a>
                                </td>
                            </tr>

                        </table>

                    </div>



                </div>

            </div>

            <div class="col-md-6">
                <div class="templeate_title">
                    <div>最近8小时漏电信息</div>
                    <div class="templeate_subitle">
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="templeate_bgc" style="padding: 10px;height: 25vh">
                    <div id="elec_8hours" style="height: 100%;"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="templeate_title">
                    <div>今日闸机出入情况</div>
                    <div class="templeate_subitle x_table">
                        <span>流量</span>
                        <span id="face_daysize" class="day_number">12</span>
                    </div>
                </div>
                <div class="templeate_bgc fontSize_content x_table " id="content_f1"
                    style="height: 25vh ;overflow: hidden;position: relative ">
                    <table class="x_plan" style="width: 100%;">
                        <colgroup>
                            <col width="33%">
                            <col width="33%">
                            <col width="33%">
                        </colgroup>
                        <tr>
                            <th>访客姓名</th>
                            <th>进校/出校</th>
                            <th>访问时间</th>
                        </tr>
                    </table>
                    <div class="height_lb" id="lb4">
                        <table class="x_plan">
                            <colgroup>
                                <col width="33%">
                                <col width="33%">
                                <col width="33%">
                            </colgroup>

                            <!-- <tr>
                                <td class="x_plan_td">王师兄</td>
                                <td class="x_plan_td">出校</td>
                                <td class="x_plan_td">2:48:22</td>
                            </tr>
                            <tr>
                                <td class="x_plan_td">王师兄</td>
                                <td class="x_plan_td">进校</td>
                                <td class="x_plan_td">10:30:22</td>
                            </tr>
                            <tr>
                                <td class="x_plan_td">王师兄</td>
                                <td class="x_plan_td">进校</td>
                                <td class="x_plan_td">10:30:22</td>
                            </tr>
                            <tr>
                                <td class="x_plan_td">王师兄</td>
                                <td class="x_plan_td">进校</td>
                                <td class="x_plan_td">10:30:22</td>
                            </tr>
                            <tr>
                                <td class="x_plan_td">王师兄</td>
                                <td class="x_plan_td">进校</td>
                                <td class="x_plan_td">10:30:22</td>
                            </tr>
                            <tr>
                                <td class="x_plan_td">王师兄</td>
                                <td class="x_plan_td">进校</td>
                                <td class="x_plan_td">10:30:22</td>
                            </tr> -->

                        </table>
                    </div>
                </div>

            </div>


        </div>
    </div>
    <script src='js/echarts.min.js'></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/echarts-liquidFill.js"></script>
    <script type="text/javascript" src="js/echarts-tooltip-auto-show/echarts-tooltip-carousel.js"></script>
    <script src="js/Cesium/Cesium.js"></script>
    <script src="js/test.js"></script>
    <script type="text/javascript " src="time.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bigScreen/bigScreen.js"></script>
    <script type="text/javascript" src="js/getData.js"></script>


</body>
<script type="text/javascript">
    //实时巡更滚动
    function TimeControl() {
        $(".patro_message_scroll_box", function () {
            //把顶部的边界清零
            $(".patro_message_scroll_box .patrol_message_scroll:first").before($(".patro_message_scroll_box .patrol_message_scroll:last"));    //在第一个新闻后面插入最后一个新闻
        })
    }
    var T = setInterval(TimeControl, 2000);    //开始定时
    $(".patro_message_scroll_box").mouseenter(function () {
        clearInterval(T);    //停止定时
    })
        .mouseleave(function () {
            T = setInterval(TimeControl, 2000);    //再次定时
        })

    //待处理隐患滚动
    function TimeControl1() {
        $(".safety_message_scroll_box", function () {
            //把顶部的边界清零
            $(".safety_message_scroll_box .safety_message_scroll:first").before($(".safety_message_scroll_box .safety_message_scroll:last"));    //在第一个新闻后面插入最后一个新闻
        })
    }
    var T1 = setInterval(TimeControl1, 2000);    //开始定时
    $(".safety_message_scroll_box").mouseenter(function () {
        clearInterval(T1);    //停止定时
    })
        .mouseleave(function () {
            T1 = setInterval(TimeControl1, 2000);    //再次定时
        })
    //巡检班组滚动
    // function TimeControl3(){
    //     $(".x_scroll_box").animate({marginTop:39},500,
    //         function(){
    //             $(".x_scroll_box").css({marginTop:0});    //把顶部的边界清零
    //             $(".x_scroll_box .x_scroll_message_scroll:first").before($(".x_scroll_box .x_scroll_message_scroll:last"));    //在第一个新闻后面插入最后一个新闻
    //
    //         });
    // }
    // var T3=setInterval(TimeControl3,2000);    //开始定时
    // $(".x_scroll_box").mouseenter(function(){
    //     clearInterval(T3);    //停止定时
    // })
    //     .mouseleave(function(){
    //         T3=setInterval(TimeControl3,2000);    //再次定时
    //     })

    //闸机出入情况滚动
    // function TimeControl4(){
    //     $(".z_scroll_box").animate({marginTop:39},500,
    //         function(){
    //             $(".z_scroll_box").css({marginTop:0});    //把顶部的边界清零
    //             $(".z_scroll_box .z_scroll_message_scroll:last").before($(".z_scroll_box .z_scroll_message_scroll:first"));    //在第一个新闻后面插入最后一个新闻
    //
    //         });
    // }
    // var T4=setInterval(TimeControl4,2000);    //开始定时
    // $(".z_scroll_box").mouseenter(function(){
    //     clearInterval(T3);    //停止定时
    // })
    //     .mouseleave(function(){
    //         T4=setInterval(TimeControl4,2000);    //再次定时
    //     })
</script>
<script>
    // 初始化一个 WebSocket 对象
    // var ws = new WebSocket("ws://localhost:8082/springboot/websocket");
    var ws = new WebSocket("ws://47.111.158.147:8083/springboot/websocket");
    //var ws = new WebSocket("wss://www.tidukeji.cn/wss");
    var startTimer = false;
    var count = 0
    var audio = null;
    var interval = null;

console.log("开始连接-----")
    // 建立 websocket 连接成功触发事件
    ws.onopen = function () {
        console.log("连接成功------");

        //    var  from={"serialNo":"xxx","idNo":"xxx"}
        //    ws.send(JSON.stringify(from));//发送参数
    };





    let colors = 'event';

    var noticedata = [];
    // 当服务端处理完成后会将数据发送回来
    ws.onmessage = function (evt) {
        //线上
        console.log("接收消息成功---------"+evt);

        var result = JSON.parse(evt.data);
        console.log(result)

        //本地测试

        // var result = {
        //     "blackName": "第" + count + "个数据",
        //     "deviceAddress": "某地址" + count,
        //     "eventDescribe": "某地发生某事",
        //     "eventType": "21312312321",
        //     "eventTypeName": "陌生人识别事件",

        //     "image": "http://47.111.158.147:8080/fileImage/eventImage/1644175361_1609396893971.jpg",

        //     "time": "time"
        // }
        noticedata.push(result)
        console.log(
            "noticedata", noticedata
        );
        panduan()


    }
    function panduan() {
        console.log("----------------panduan");
        if (noticedata.length && !startTimer) {
            console.log("count", count);
            var data = noticedata[count]



            console.log("noticedata.pop", data);

            if (data) {
                count++;

                startTimer = true;
                show(data)
            }

        }

    }

    function p(s) {
        return s < 10 ? '0' + s : s
    }





    function show(data) {


        const promise = new Promise((resolve, rejest) => {
            $("#tankuang").empty()
            $("#tankuang").css("visibility", "visible")



            const d = new Date(data.time)
            const resDate = d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate())
            const resTime = p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds())

            let newddate = resDate + "  " + resTime
            console.log("newddate", newddate);

            var audio = document.getElementById("audio");

            audio.play();
            let res = ''

            switch (data.eventTypeName) {
                case "陌生人识别事件":
                    res = ` <div id="header" >                               
                    <img id='eventicons'  src="https://jsdaima.hu-cheng.net/js/2019/12/3518/img/01.gif"></img>

                    <div style=" text-align: left; flex: 1;  text-indent:2em;font-size: 1.8rem; letter-spacing: 1; margin: 10  0">
                        您好！平台发现有陌生人员于<span class=${colors}>${newddate} </span> 时进入
                     <span class=${colors}>  ${data.deviceAddress}  </span> ，请安保人员留意，尽快处置。
                    </div>
             
                   <div id="imgbox"> ${data.image ? `<img style='width: 70%; height: 40%'  src=${data.image}></img> ` : `<img style='width: "80%";height: "50%"'  src='http://47.111.158.147:8080/image/02.gif'></img>`}</div> <div style="textAlign: 'center'; marginTop: '10px'; fontSize:'1.8rem' "> 现场照片</div> </div> `
                    break

                case "区域入侵事件":
                    res = ` <div id="header" >                               
                    <img id='eventicons'  src="https://jsdaima.hu-cheng.net/js/2019/12/3518/img/01.gif"></img>

                    <div style=" text-align: left; flex: 1;  text-indent:2em;font-size: 1.8rem; letter-spacing: 1; margin: 10  0">
                    您好！平台于<span class=${colors}>${newddate} </span> 发现有人员在非正常时段进入
                     <span class=${colors}>  ${data.deviceAddress}  </span>报警区域，请安保人员留意，尽快处置。

                    </div>
             
                   <div id="imgbox"> ${data.image ? `<img style='width: 70%; height: 40%'  src=${data.image}></img> ` : `<img style='width: "80%";height: "50%"'  src='http://47.111.158.147:8080/image/02.gif'></img>`}</div> <div style="textAlign: 'center'; marginTop: '10px'; fontSize:'1.8rem' "> 现场照片</div> </div> `
                    break
                case "重点人员识别事件":
                    res = ` <div id="header" >                               
                    <img id='eventicons'  src="https://jsdaima.hu-cheng.net/js/2019/12/3518/img/01.gif"></img>

                    <div style=" text-align: left; flex: 1;  text-indent:2em;font-size: 1.8rem; letter-spacing: 1; margin: 10  0">
                    您好！平台发现重点监控区域
                    <span class=${colors}> ${data.blackName ? data.blackName : "未知人员"}  </span>于<span class=${colors}>${newddate} </span> 时出现在
                     <span class=${colors}>  ${data.deviceAddress}  </span> ，请安保人员留意，尽快处置。
                    </div>
                   <div id="imgbox"> ${data.image ? `<img style='width: 70%; height: 40%'  src=${data.image}></img> ` : `<img style='width: "80%";height: "50%"'  src='http://47.111.158.147:8080/image/02.gif'></img>`}</div> <div style="textAlign: 'center'; marginTop: '10px'; fontSize:'1.8rem' "> 现场照片</div> </div> `

                    break
            }
            console.log("res", res);
            $("#tankuang").append(res)

            let T = setTimeout(() => {
                resolve()
            }, 15000)
        }).then(() => {

            handleset()
        })




    }

    function handleset() {

        let T = setTimeout(() => {
            var audio = document.getElementById("audio");

            audio.pause()
            audio.load("./data/WARNING.mp3")

            startTimer = false

            $("#tankuang").css("visibility", "hidden")

            clearTimeout(T)
            panduan()
        }, 2000);


    }
</script>

</html>